<template>
	<view class="content">
		<!-- logo -->
		<view class="logo" :style="{'margin-top': statusBarHeight + 'px'}">
		</view>
		<!-- 搜索 -->
		<view class="search_box">
			<u-search></u-search>
		</view>
		<!-- 滑槽数据列表 -->
		<u-scroll-list>
			<view v-for="(item, index) in kingkongList" :key="index" class="scroll_Item" indicatorColor="#fff0f0"
				indicatorActiveColor="#f56c6c">
				<image :src="item.picUrl" class="scroll_Item_Img"></image>
				<view class="scroll_Item_text">{{item.text}}</view>
			</view>
		</u-scroll-list>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		mapState
	} from 'vuex';
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: 0,
			}
		},
		onLoad() {
			//获取状态栏的高度
			const windowInfo = uni.getWindowInfo();
			this.statusBarHeight = windowInfo.statusBarHeight;
			//初始化获取首页数据
			this.getHomeData()

		},
		methods: {
			...mapActions('home', ['getHomeData'])
		},

		computed: {
			...mapGetters('home', ['kingkongList'])
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 0 5px;
	}

	.logo {
		width: 144rpx;
		height: 40rpx;

		background: {
			image: url('https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/index-2bead27820aa97c2bf8e087d53162dd9.png');
			position: -131rpx -347rpx;
			size: 391rpx;
		}

		;
		vertical-align: middle;
		margin-right: 20rpx;
		margin-left: 5px;
		display: inline-block;
	}

	.search_box {
		margin: 20px 0;

	}


	.scroll_Item {
		margin: 0 20px;

	}

	.scroll_Item_Img {
		width: 35px;
		height: 30px;
		border-radius: 3px;
	}

	.scroll_Item_text {
		text-align: center;
		font-size: 24rpx;
	}
</style>
